<template>
    <div class="page-trade">
       <div class="trade-symbol upper">
           <span @click="drawer()" class="draw-img"> <img class="select-buy" src="../../assets/select.png" ></span>
            <span class="draw"  @click="drawer()">{{selectedPair.fname_sn}}</span>
                <a @click="chartTo()"  :style="{'padding-left':!report?'60px':'15px'}"><img src="../../assets/kline.png" ></a>
                <span v-if="report" >
                    <img  src="../../assets/more.png" @click="moreTo()">
                </span>
        </div>
        <div class="trade-panel" growing-ignore="true">
            <div class="trade-panel--title" id="trade-pannel-tabs">
                <button class="btn color-buy cur " v-bind:class="panelChart==1?'buy-active buy':''" @click="tradeBuy()">买入</button> 
                <button class="btn color-sell " v-bind:class="panelChart==2?'buy-active sell':''" @click="tradeSell()">卖出</button>
            </div>
            <div class="trade-panel--content">
                <div class="fl trade-form buy" id="trade-form" growing-ignore="true">
                    <div class="select-box">
                    </div>
                    <div class="input-box input-price">
                        <input style="width:60%;margin-right:30px;" autocomplate="new-password" @input="amountOrderBtnNum()" v-model="buyOrderNumber" id="price" min="0" placeholder="价格" type="number"> 
                        <span  id="price-actions" style="width:35%">
                             <span  id="d-price"  @click="dPrice()">对手价</span>
                        </span>
                    </div>
                    <div class="equivalent">
                        <span>≈<em id="price-equivalent">¥{{equivalent}}</em></span>
                    </div>
                    <div class="input-box input-amount">
                        <input autocomplate="new-password" @input="amountOrderBtn()" v-model="amountOrder" id="amount" min="0" placeholder="数量" type="number">
                            <span class="upper" id="amount-coin" >{{selectedPair.fShortName}}</span>
                    </div>
                    <div class="avaliable">
                        <dl growing-ignore="true">
                            <dt class="fl">可用</dt>
                            <dd class="upper base-balance">
                                <span id="base-balance"  v-if="panelChart==1">{{userInfo.rmbtotal}}</span>
                                <span id="base-balance"  v-if="panelChart==2&&!reportShow">{{userInfo.virtotal}}</span>
                                  <span id="base-balance"  v-if="panelChart==2&&reportShow">{{virtotal}}</span>
                                <em data-base="btc"></em>
                            </dd>
                        </dl>
                    </div>
                        <div class="block">
                        <Slider v-model="valueSlider"  :step="25" 
                        show-stops></Slider>
                        </div>
                    <div class="total" id="total">
                    </div>
                       <button v-if="report && reportShow &&panelChart==1" @click="buyReportOrder()" class="upper submit" >共识买入</button>
                        <button v-if="report && reportShow &&panelChart==2" @click="buyReportOrder()" class="upper submit sell-submit" >共识卖出</button>
                     <button @click="login()" class="upper submit" :class="panelChart==1?'submit':'sell-submit'" v-if="(userInfo.isLogin==0&&!reportShow)">请登录</button>
                    <button @click="buyOrder()" class="upper submit" v-if="(panelChart==1&&userInfo.isLogin==1&&!reportShow)" data-base="btc" data-directtext="买入" id="submit">买入 {{selectedPair.fname}}</button>
                    <button @click="buyOrder()" class="upper submit sell-submit" v-if="(panelChart==2&&userInfo.isLogin==1&&!reportShow)" data-base="btc" data-directtext="卖出" id="submit">卖出 {{selectedPair.fname}}</button>
                </div> 
                <div class="fr handicap" id="handicap">
                    <div class="handicap-title">
                        <span class="price" >价格({{selectedPair.group}})</span>
                            <span class="amount">数量({{selectedPair.fShortName}})</span>
                    </div>
                     <div class="handicap-price" v-if="stateChangeId==3">
                        <em id="nowprice" :style="fupanddownColor" >{{filter(deptLast.last)}}</em> 
                        <span>≈<b id="now-price-equivalent">¥{{filter(deptLast.last*okerRatePrice)}}</b>
                        </span>
                    </div>
                    <div class="handicap-sell" id="handicap-sell" :style="{ 'height': stateChangeId==2?'460px':'',}" v-if="stateChangeId==1||stateChangeId==2">
                        <div :style="{'padding-top':sellDepthList.length>0?((stateChangeId==1?5:10)-sellDepthList.length)*48+'px':''}">
                            <dl @click="setPairSell(icon[0])" data-price="8233.47" v-for="(icon, i) in sellDepthList" v-bind:key="i"  :style="{'background-size': (filter(icon[2]/sellBuyCount)*100)+'%'}">
                                <dt class="fl">{{filter(icon[0])}}</dt>
                                <dd class="fr">{{icon[1]}}</dd> 
                            </dl>
                        </div>
                    </div>
                    <div class="handicap-price" v-if="stateChangeId==1">
                        <em id="nowprice" :style="fupanddownColor" >{{filter(deptLast.last)}}</em> 
                        <span>≈<b id="now-price-equivalent">¥{{filter(deptLast.last*okerRatePrice)}}</b>
                        </span>
                    </div>
                        <div class="handicap-buy" id="handicap-buy" v-if="stateChangeId==1||stateChangeId==3"  :style="{ height: stateChangeId==3?'460px':'',}">
                            <dl @click="setPairBuy(icon[0])"  :style="{'background-size': (filter(icon[2]/maxBuyCount)*100)+'%'}" data-price="8232.14" v-for="(icon, i) in buyDepthList" v-bind:key="i">                   
                                <dd class="fl" >{{filter(icon[0])}}</dd> 
                                <dd class="fr">{{icon[1]}}</dd>               
                            </dl>
                        </div>
                        <div class="handicap-price" v-if="stateChangeId==2">
                            <em id="nowprice" :style="fupanddownColor">{{filter(deptLast.last)}}</em> 
                            <span>≈<b id="now-price-equivalent">¥{{filter(deptLast.last*okerRatePrice)}}</b>
                            </span>
                        </div>
                        <div class="flex-center order-select">
                                <Select :accuracy=selectAccuracy  :value=value @func="getMsg" style="width:200px;"></Select>  
                                <img  @click="stateChange(1)" class="select-buy" :src="iconImg">
                        </div>       
                </div>
            </div>
        </div>
            <div class="trade-order">
                <div class="trade-order--title">
                    <span class="align">当前委托</span>
                    <span class="fr" id="to-history">
                        <a @click="goCurrentOrder()" style="color:rgba(224, 224, 249, 1)" ><i class="mobile_icon_history"></i>全部</a>
                        </span>
                    </div>
                    <div class="trade-order--content" id="order-list" growing-ignore="true">
                        <div >
                            <div class="order-table"    v-for="(data, j) in entrustTradLists" v-bind:key="j" >
                                  <div class="order-header" >
                                    <div class="flex-between ">
                                        <p v-if="data.fentrustType==0" class="order-buy">买入{{selectedPair.fShortName}}</p>
                                        <p v-if="data.fentrustType==1" class="order-sell">卖出{{selectedPair.fShortName}}</p>
                                        <p>时间：{{timestampToTime(data.flastUpdatTime) }}</p>
                                        <button @click="cancelOrder(data)" class="upper submit start"   id="submit">撤单</button>
                                    </div>
                                </div>
                                <div class="order-content flex-between" >
                                    <div class="flex-center">
                                    <div class="all-amount flex-column">
                                        <span>价格(USDT)</span>
                                        <span class="color">{{filterDecimals(data.fprize)}}</span>
                                    </div>
                                    <div class="all-amount flex-column">
                                        <span>数量({{selectedPair.fShortName}})</span>
                                        <span class="color">{{data.fcount}}</span>
                                    </div>
                                    <div class="all-amount flex-column">
                                        <span>实际成交({{selectedPair.fShortName}})</span>
                                        <span class="color">{{(data.fcount-data.fleftCount).toFixed(4)}}</span>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="entrustTradLists.length==0" class="data-img">
                                <img src="../../assets/coin-code.png">
                                <p >暂无记录</p>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="drawer" v-if="drawerShow"  >
                <div class="drawer-box" v-bind:style="{ left: drawerShow==true?'0px':'',}" v-clickOut="clickOut">
                        <div class="drawer--title">
                        币币
                    </div>
                    <div class="drawer--tabs" id="drawer-tabs">
                        <i class="mobile_icon_fav" v-for="(coin, i) in coinGroup" v-bind:key="i"  @click="changeGroup(coin)">
                            <span class="cur upper" data-coin="usdt" >{{i}}</span>
                        </i>
                    </div>
                        <div class="drawer--content" >
                        <div class="list" v-for="(ticker, i) in tickers" v-bind:key="i" @click="setPair(ticker)">
                            <dl data-href="btc_usdt">
                                <dt class="cur fl upper" :class="selectedPair.fid==ticker.fid?'upper-display':''">{{ticker.fname_sn}}</dt>
                                <dd class="fl">{{ticker.lastDealPrize}}</dd> 
                            </dl>
                        </div>
                    </div>
                </div>
                <div style="width:20%"></div>
            </div>
              <mt-actionsheet
        :actions="actions"
       v-model="endActions">
        </mt-actionsheet>
         <mt-actionsheet
        :actions="coinActions"
       v-model="coinActionsVish">
        </mt-actionsheet>
    </div>
</template>
<script>
  import { Toast } from 'mint-ui';//导入toast组件
import Select from '@/components/select/select';
import Slider from '@/components/Slider/main';
 import { Indicator } from 'mint-ui';
 import { MessageBox } from 'mint-ui';
 import { Actionsheet } from 'mint-ui';
import {mapMutations, mapActions} from 'vuex';
import {
	address,
} from '../../../src/service/getData'
export default {
        name: 'trade',
            components: {Select,Slider},
        data () {
            return {
                endActions:false,
                   actions: [{
                name: '买卖盘',
                id:1,
                method :this.coinRecond
              }, {
                name: '买盘', 
                id:2,
                method :this.coinRecond
                 }, {
                      id:3,
                name: '卖盘', 
                method :this.coinRecond
                 }],
                 coinActions:[
                {
                name: '币币买卖',
                id:1,
                method :this.coinRecondReport
              }, {
                name: '共识买卖', 
                id:2,
                method :this.reportRecond
                 },
                 ],
            selectedPair:'',
            drawerShow:false,
            coinGroup:[],
            stateChangeId:1,
            tickers:[],
            amountOrder:null,
            equivalent:"",
            buyOrderNumber:'',
            panelChart:1,
            entrustList:[],
            value:[{index:1,data:"精度1"},{index:2,data:"精度2"},{index:3,data:"精度3"},{index:4,data:"精度4"}],
            okerRatePrice:'',
            valueSlider: 0,
            sellDepthList:"",
           buyDepthList:[],
           iconImg:require('../../assets/icon2.png'),
           deptLast:'',
           userInfo:{},refreshList:[],
           sessionData:'',
           fupanddownColor:'',
           selectAccuracy:4,
           report:false,
           reportShow:false,
           coinActionsVish:false,
           entrustTradLists:[],
           virtotal:"",userReportTrade:'',
           userDisabled:'',
           socket:'',
           maxBuyCount:'',
           sellBuyCount:''
           }
        },   
         created() {
            Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
        });
         this.SET_HISTORY({history:''});
        },
     
     watch: {
         buyDepthList:function name(list) {
                if (list) {
                var maxBuyCount = 0
                for (var i = 0; i < list.length; i++) {
                    if (maxBuyCount < list[i][2] * 1) {
                        maxBuyCount = list[i][2] * 1;
                    }
                }
                this.maxBuyCount = maxBuyCount;
            }
            },
               sellDepthList:function name(list) {
                if (list) {
                var sellBuyCount = 0
                for (var i = 0; i < list.length; i++) {
                    if (sellBuyCount < list[i][2] * 1) {
                        sellBuyCount = list[i][2] * 1;
                    }
                }
                this.sellBuyCount = sellBuyCount;
            }
            },
      valueSlider(val){
        if(this.panelChart==1){
            this.amountOrder=(this.userInfo.rmbtotal*val/100).toFixed(4);
        }else{
            this.amountOrder=(this.userInfo.virtotal*val/100).toFixed(4);
        }
      }
    },
        methods:{
              ...mapMutations([
                'SET_REPORT','SET_HISTORY','SET_FILTER'
            ]),
            amountOrderBtnNum(){
                  this.buyOrderNumber=(this.buyOrderNumber).replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3');
                this.equivalent=(this.buyOrderNumber*this.okerRatePrice).toFixed(4);
            },
              userReportsData(){
               let self=this;
              let param={
                  coinId:this.selectedPair.fid,
              }
            this.$http.post('/v2/market/userReportsData',param)
                .then(function(res) {
                    if(res.data.code==200){
                         self.virtotal=res.data.data.cashAmount;
                     self.userReportTrade=res.data.data.buyPrice;
                    }
                })
            },
          moreTo(){
              this.coinActionsVish=true;
          },
          coinRecondReport(){
                this.SET_REPORT({type:''});
              this.reportShow=false;
                this.SET_REPORT({type:''});
          },
            reportRecond(){
              this.reportShow=true;
                this.refreshReportUser(this.selectedPair.fid,'1,2');
                   this.SET_REPORT({type:this.report});
          },
             amountOrderBtn(){
                  this.amountOrder=this.amountOrder.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3');
            },
            coinRecond(val){
               if(val.id==1){
                    localStorage.setItem("stateChangeId",1);
                    this.iconImg=(require('../../assets/icon2.png'));
                }else if(val.id==2){
                    localStorage.setItem("stateChangeId",3);
                    this.iconImg=(require('../../assets/icon3.png'));
                }else if(val.id==3){
                    localStorage.setItem("stateChangeId",2);
                    this.iconImg=(require('../../assets/icon4.png'));
                }
                   this.getmarketList();
            },
            stateChange(){
                this.endActions=!this.endActions;
            },
              dPrice(){
                  if(this.panelChart==1){
                      if(this.sellDepthList.length>0){
                          this.buyOrderNumber=this.sellDepthList[this.sellDepthList.length-1][0];
                      }
                  }else if(this.panelChart==2){
                      if(this.sellDepthList.length>0){
                    this.buyOrderNumber=this.buyDepthList[0][0];
                      }
                  }
            },
              connectWs(pair) {
                  let self=this;
                    self.socket && self.socket.close();
                let host=address;
            self.socket= io('https://'+host+'/trade?deep=4&token=dev&step=300&symbol=' + pair.fid, { transports: ['websocket', 'pull'] });
              let timerSell;
           self.socket.on('entrust-sell', function(msg) {
                    if(timerSell) clearTimeout(timerSell);//如果500毫秒内又一次触发，则会重新计算时间
                    timerSell = setTimeout(() => {
                     self.sellDepthList=eval("(" + msg + ")");
                     if(!eval(msg)){
                        return ;
                    }
                  if(self.sellDepthList.length>0){
                 if(localStorage.getItem("stateChangeId")==1){
                        self.sellDepthList = (self.sellDepthList?self.sellDepthList.splice(0, 5):'');
                    }else  if(localStorage.getItem("stateChangeId")==2){
                            self.sellDepthList = (self.sellDepthList?self.sellDepthList.splice(0, 10):'');
                    }
                  }
                 let sellang=0;
              let sellList = []
          for (let i=0;i<self.sellDepthList.length ;i++) {
                sellang = sellang + self.sellDepthList[i][1]
                sellList.push(
                    [
                        self.sellDepthList[i][0],
                        self.sellDepthList[i][1],
                        sellang
                    ]
                )
            }
            self.sellDepthList=sellList;
             self.sellDepthList= self.sellDepthList.reverse();
                    }, 500)    
            });
               let timerBuy;
                self.socket.on('entrust-buy', function(msg) {
                    if(timerBuy) clearTimeout(timerBuy);//如果500毫秒内又一次触发，则会重新计算时间
                    timerBuy = setTimeout(() => {
                    self.buyDepthList= eval(msg);
                     if(self.buyDepthList.length>0){
                   self.depthListFliter();
                }
                  }, 500)     
            });
            self.socket.on('entrust-log', function(msg) {
                  self.entrustTradLists== eval(msg);
            });
            self.socket.on('real', function(msg) {
                var ticker = eval("(" + msg + ")");
                 if(!ticker){
                        return ;
                    }
              self.deptLast=ticker;
              if(!ticker){
                  return ;
              }
              if(!ticker.fupanddown){   
                  self.fupanddownColor='color:#d14b64'
              }
              self.fupanddownColor=ticker.fupanddown>0?'color:#03ad8f':'color:#d14b64';
            });
            self.socket.on('entrust-update', function(msg) {
                var newData = eval("(" + msg + ")");
            });
        },
        filter(x){
            if(isNaN(x)){
                return '0'
            }
            var pos=this.selectAccuracy;
            var f = Math.round(x * Math.pow(10, pos)) / Math.pow(10, pos);
            var s = f.toString();
            var rs = s.indexOf('.');
            if (rs < 0) {
                rs = s.length;
                s += '.';
            }
            while (s.length <= rs +  pos) {
                s += '0';
            }
            return f.toFixed(pos);
        }, 
        goCurrentOrder(){
              if(this.userInfo.isLogin==1){
                        this.$router.push({
                path: '/trade/all',
                query: {
                    symbol: this.selectedPair.fid,
                    report:this.report?'1':''
                }
                })
              }else{
                    this.$router.push("/login");
              }
        },
        chartTo(){
            this.$router.push({
          path: '/chart',
          query: {
            symbol: this.selectedPair.fid,
            type:this.panelChart==1?1:2
          }
        })
        },
         getUserInfo() {
             this.$http.post('/v2/market/allcoins',).then((res)=>{
                let tickers = res.data;
                 let coinGroup = {}
                    let param = location.hash.match(new RegExp(".*" + 'symbol' + "=([^\&]*)(\&?)", "i"));
                    let symbol = param && !isNaN(param[1]) ? param[1] : 0;
                    let current = null;
                    for (let i = 0; i < tickers.length; i++) {
                        let ticker = tickers[i]
                        if (coinGroup[ticker.group] === undefined) {
                            coinGroup[ticker.group] = []
                        }
                        coinGroup[ticker.group].push(ticker);
                        if (symbol && ticker.fid == symbol) {
                            current = ticker
                        }
                    }
                    let newGroup = this.objKeySort(coinGroup);
                     if (!current) {
                        for (let group in newGroup) {
                            current = newGroup[group][0]
                            break;
                        }
                    }
                    this.selectedPair=current;
                    this.coinGroup=coinGroup;
                    this.tickers = coinGroup[current.group]
                     this.setPair(this.selectedPair);
             })
        },
        getOkerRatePrice(){
            this.$http.post('v2/market/okexExchangeRate').then((res)=>{
        this.okerRatePrice = res.data.data.futureTicker.rate;
       })
        },
        setPair(pair){
                if(pair.report){
                    this.report=true;
                }else{
                    this.report=false;
                    this.reportShow=false;
            }
             this.selectedPair=pair;
             location.hash = this.$router.history.current.path+'?symbol=' +  this.selectedPair.fid;
          //  localStorage.setItem("trade.symbol",this.selectedPair.fid);
            this.getmarketList();
               this.refreshReportUser(this.selectedPair.fid,'1,2');
            this.getOkerRatePrice();
            this.connectWs(pair);
              this.refreshUser();
      this.drawerShow=false;
      this.userReportsData();
        },
        getmarketList() {
            let self=this;
            this.$http.get('/v2/market/marketRefresh?deep=4&symbol=' + this.selectedPair.fid )
                .then(function(res) {
                    if(res.status==200){
                          self.sellDepthList = res.data.sellDepthList;
                    if(localStorage.getItem("stateChangeId")==1){
                        self.sellDepthList = (self.sellDepthList?self.sellDepthList.splice(0, 5):'');
                    }else  if(localStorage.getItem("stateChangeId")==2){
                            self.sellDepthList = (self.sellDepthList?self.sellDepthList.splice(0, 10):'');
                    }
                     self.sellDepthList = self.sellDepthList.reverse();
                     self.buyDepthList=res.data.buyDepthList;
                     self.refreshList=res.data;
                     self.depthListFliter();
                    }
                })
        },
      depthListFliter(){
          let sellang=0;
          let buyang=0;
              let sellList = []
            let dataBuyList = []
          for (let i=0;i<this.sellDepthList.length ;i++) {
                sellang = sellang + this.sellDepthList[i][1]
                sellList.unshift(
                    [
                        this.sellDepthList[i][0],
                        this.sellDepthList[i][1],
                        sellang
                    ]
                )
            }
           for (let i=0;i<this.buyDepthList.length ;i++) {
                buyang =buyang + this.buyDepthList[i][1]; 
                dataBuyList.push(
                    [
                        this.buyDepthList[i][0],
                        this.buyDepthList[i][1],
                        buyang
                    ]
                )
            }
            this.sellDepthList=sellList;
              this.buyDepthList=dataBuyList;

          if(parseFloat(localStorage.getItem("stateChangeId"))==1){
              this.stateChangeId=1;
                  this.iconImg=(require('../../assets/icon2.png'));
                  if(this.buyDepthList.length>0){
                    this.buyDepthList = (this.buyDepthList?this.buyDepthList.splice(0, 5):'');
                  }
          }else  if(parseFloat(localStorage.getItem("stateChangeId"))==2){
                this.stateChangeId=2;
                this.iconImg=(require('../../assets/icon4.png'));
          }else  if(parseFloat(localStorage.getItem("stateChangeId"))==3){
                  this.stateChangeId=3;
                   this.iconImg=(require('../../assets/icon3.png'));
                   if(this.buyDepthList.length>0){
                this.buyDepthList = this.buyDepthList?this.buyDepthList.splice(0, 10):'';
              
                   }
          }
      },
      setPairSell(res){
          this.buyOrderNumber=res;
      },
      setPairBuy(res){
        this.buyOrderNumber=res;
      },
      refreshReportUser(symbol,status){
              let self=this;
              let param={
                  coinId:symbol,
                  stauts:status,
                  page:1,
                  pageSize:20
              }
            this.$http.post('/v2/market/newMarketRefresh',param)
                .then(function(res) {
                    if(res.data.code==200){
                        self.entrustTradLists=res.data.data;
                     Indicator.close();
                    }
                })
        },
        refreshUser(){
              let self=this;
            this.$http.get('/v2/market/refreshUserInfo?symbol=' + this.selectedPair.fid)
                .then(function(res) {
                    if(res.data.isLogin){
                    self.userInfo=res.data;
                    }
                      Indicator.close();   
                })
        },
           userIsDisabled(){
            let self=this;
            this.$http.post('/v2/market/userIsDisabled',{symbol:this.selectedPair.fid})
                .then(function(res) {
                  if(res.daat.code=200){
                       self.userDisabled=res.data.data.status;
                  }
                })
        },
        buyReportOrder(){
             let self=this;
            if(this.isEmpty(this.buyOrderNumber)){
                Toast("价格不能为空");
                return;
            }
            if(this.isEmpty(this.amountOrder)){
                Toast("数量不能为空")
                return;
            }
            if(this.userDisabled==2){
                   Toast("您已被禁止参与共识买卖，请申请加入")
                return;
            }
            if(!this.sessionData.safeword){
                     Toast("资金密码未设置,请设置资金密码");
                     return;
            }
             if(this.userInfo.needTradePasswd){
                MessageBox({
                                inputType: "password"
                            });
                                MessageBox.prompt("请输入资金密码","number").then(({ value, action }) => {
                                    this.buyOrderGroup(value,1)
                        })
             }else{
                   this.buyOrderGroup('',1);
             }
        },
        buyOrder(){
            let self=this;
            if(this.isEmpty(this.buyOrderNumber)){
                Toast("价格不能为空");
                return;
            }
            if(this.isEmpty(this.amountOrder)){
                Toast("数量不能为空")
                return;
            }
             if(!this.sessionData.safeword){
                     Toast("资金密码未设置,请设置资金密码");
                     return;
            }
             if(this.userInfo.needTradePasswd){
                MessageBox({
                                inputType: "password"
                            });
                                MessageBox.prompt("请输入资金密码","number").then(({ value, action }) => {
                                    this.buyOrderGroup(value,0)
                        })
             }else{
                   this.buyOrderGroup('',0);
             }
        },
        buyOrderGroup(value,type){
             let self=this;
            if(type==1&&this.panelChart==2){
                if(((this.userReportTrade*0.9)<parseFloat(this.buyOrderNumber) && parseFloat(this.buyOrderNumber)<((this.userReportTrade*1.02)) || this.buyOrderNumber>(this.userReportTrade*1.1))){
                       MessageBox.confirm('卖出价高于'+((this.userReportTrade*0.9).toFixed(4))+'且不在'+((this.userReportTrade*1.02).toFixed(4))+'-'+((this.userReportTrade*1.1).toFixed(4))+'之间时，卖出后将被禁共识交易，确认卖出？').then(action => {
                           this.orderBuySell(value,type);
                            return ;
                     }).catch(err => { 
                if (err == 'cancel') {     //取消的回调
                    return ;
                    } 
                });
                }else{
                      this.orderBuySell(value,type);
                }
            }else{
                this.orderBuySell(value,type);
            }
        },
        orderBuySell(value,type){
              let self=this;
            let data = {
                        symbol: this.selectedPair.fid,
                        tradeAmount: this.amountOrder,
                        tradeCnyPrice: this.buyOrderNumber,
                        tradePwd: value,
                        tradeType: type
                    };
                if(this.panelChart==2){
                  this.$http.post('/v2/market/sellBtcSubmit', data)
                    .then(function(res) {
                    if (res.data.code == -13) {
                            Toast("交易密码错误");
                        }else if(res.data.code == -11){
                        Toast("余额不足");
                        }else if(res.data.code==200){
                            self.refreshReportUser(self.selectedPair.fid,'1,2');
                             self.refreshUser();
                            self.amountOrder='';
                            self.buyOrderNumber='';
                             Toast('卖出成功');
                        }else if(res.data.code==-2){
                             Toast('该交易对已被禁用');
                        }else if(res.data.code==-12){
                             Toast('您未设置交易密码');
                        }else if(res.data.code==-15){
                             Toast('必须将共识持仓全部买入后，才能进行共识卖出');
                        }else if(res.data.code==-14){
                             Toast('该币种不允许共识买卖');
                        }else if(res.data.code==-16){
                             Toast('共识额度不允许超出最大共识限额');
                        }else if(res.data.code==-17){
                             Toast('');
                        }else if(res.data.code==-18){
                             Toast('余额不足');
                        }else if(res.data.code==-20){
                             Toast('您已被禁止参与共识买卖，请申请加入');
                        }else if(res.data.code==-21){
                             Toast('您共识买入委托中时，不允许共识卖出');
                        }
                })
            }else {
                 this.$http.post('/v2/market/buyBtcSubmit', data)
                    .then(function(res) {
                    if (res.data.code == -13) {
                            Toast("交易密码错误");
                        }else if(res.data.code == -11){
                        Toast("余额不足");
                        }else if(res.data.code==200){
                            self.refreshReportUser(self.selectedPair.fid,'1,2');
                             self.refreshUser();
                             self.amountOrder='';
                            self.buyOrderNumber='';
                             Toast('买入成功');
                        }else if(res.data.code==-2){
                             Toast('该交易对已被禁用');
                        }else if(res.data.code==-12){
                             Toast('您未设置交易密码');
                        }else if(res.data.code==-15){
                             Toast('必须将共识持仓全部卖出后，才能进行共识买入');
                        }else if(res.data.code==-14){
                             Toast('该币种不允许共识买卖');
                        }else if(res.data.code==-16){
                             Toast('共识额度不允许超出最大共识限额');
                        }else if(res.data.code==-17){
                             Toast('今日已完成共识买卖，请明天在进行共识买卖');
                        }else if(res.data.code==-18){
                             Toast('余额不足');
                        }else if(res.data.code==-20){
                             Toast('您已被禁止参与共识买卖，请申请加入');
                        }else if(res.data.code==-21){
                             Toast('共识买入委托中时，不允许共识卖出');
                        }
                })
             }
        },
         cancelOrder(order){
            this.$http.post('/v2/market/cancelEntrust', { id: order.fid })
                .then(()=>{
                    Toast("撤单成功");
                    this.refreshReportUser(this.selectedPair.fid,'1,2');
                     this.refreshUser();
                })
        },
        changeGroup(res){
            this.tickers=res;
        },
        filterDecimals(res){
            return res.toFixed(4);
        },
                objKeySort(obj) {
            var newkey = Object.keys(obj).sort();
            var newObj = {};
            for (var i = 0; i < newkey.length; i++) {
                newObj[newkey[i]] = obj[newkey[i]];
            }
            return newObj;
        },
        getMsg(data){
            if(data==3){
                this.selectAccuracy=4;
            }else if(data==2){
                this.selectAccuracy=3;
            }else if(data==1){
                this.selectAccuracy=2;
            }else if(data==0){
                this.selectAccuracy=1;
            }
            this.SET_HISTORY({filter:this.selectAccuracy});
            this.getmarketList();
        },
        drawer(){
            this.drawerShow=!this.drawerShow;
        },
         clickOut(el){
                      this.drawerShow=false;
          },
        tradeBuy(){
            this.panelChart=1;
            localStorage.setItem("panelChart",1)
        },
        tradeSell(){
            this.panelChart=2;
             localStorage.setItem("panelChart",2)
        },
            show(){
                Toast('提示消息');
            },
            login(){
                this.$router.push("/login");
            },
                timestampToTime (cjsj) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()
        return Y+M+D+h+m+s
    },
     isEmpty(val) {
                //val = val.trim();
                if (val == null)
                    return true;
                if (val == undefined || val == 'undefined')
                    return true;
                if (val == "")
                    return true;
                if (val.length == 0)
                    return true;
                if (!/[^(^\s*)|(\s*$)]/.test(val))
                    return true;
                return false;
            },
        },
          directives : {
                clickOut: {
                    bind: function(el, binding) {
                        let  self=this;
                    function handler(e) {
                            if(e.target.className=="draw" || e.target.className=='select-buy'){
                                return false
                            }
                        if (el.contains(e.target)){
                            return false
                    }
                    
                    if (binding.expression) {
                        binding.value()
                    }
                    }
                    el.handler = handler
                    document.addEventListener('click', el.handler)
                    },
                    unbind: function(el) {
                    document.removeEventListener('click', el.handler)
                    }    
                },
                },
       mounted:function(){

            !function (w) {
            InitView();
            var evt = "onorientationchange" in w ? "orientationchange" : "resize";
            w.addEventListener(evt, function () {
                InitView()
            }, false);
    
            function InitView() {
                var t = 750,
                    w = screen.width,
                    h = screen.height,
                    a = w / t,
                    n = w.viewMeta || document.createElement('meta');
                w.viewMeta || document.getElementsByTagName("head")[0].appendChild(n);
                n.setAttribute('name', 'viewport');
                n.setAttribute('content', "width=" + t + ", initial-scale=" + a + ",maximum-scale=" + a + ",minimum-scale=" + a + ", user-scalable=no,target-densitydpi=device-dpi,minimal-ui,uc-fitscreen=no");
                window.viewPortNum = a;
            }
    
            w.showPlaceholder = 1;
        }(window);
    
        var PAGE = location.pathname.replace(new RegExp('/(?:\\w{2}-\\w{2}/)?'), "").split('/')[0];
        window.onbeforeunload = function () {
            localStorage.removeItem('isPublicPage')
             };

             
            if(this.$route.query.report||this.$store.state.report==1){
                   this.reportShow=true;
                }
           let self=this;
            this.$http.post('v1/session?'+ new Date().getTime(), {func:""}).then((res) => {
                if(res.data.code==200){
                    self.sessionData=res.data.data;
                    self.userInfo.isLogin=1;
                }else if(res.data.code==1){
                     self.userInfo.isLogin=0
                }
            })
             if(!localStorage.getItem("stateChangeId")){
                localStorage.setItem("stateChangeId",1);
             }
             if(localStorage.getItem("panelChart")==1){
                 this.panelChart=1
             }else if(localStorage.getItem("panelChart")==2){
                 this.panelChart=2
             }
            this.getUserInfo();
           
    },
    destroyed() {
    localStorage.setItem("panelChart",1);
     Indicator.close();
},
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.footer .user-info,.header .btn-group,.page-trade .drawer--content dl,.page-trade .trade-order--content dl,.page-trade .trade-order--title,.page-trade .trade-panel--content,.page-trade .trade-panel--content .handicap-buy dl,.page-trade .trade-panel--content .handicap-price,.page-trade .trade-panel--content .handicap-sell dl,.page-trade .trade-panel--content .handicap-title,.page-trade .trade-panel--content .trade-form .avaliable dl,.page-trade .trade-panel--content .trade-form .btn-group,.page-trade .trade-panel--title,.page-trade .trade-symbol .actions,.page-trade .trade-symbol p {
    *zoom:1}
[class^="icon"], [class*="icon"] {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-xiala{
    color: #ADADD8;
    font-size: 12px;
    position: relative;
    top:-5px
}
.select-buy{
    margin-left: 20px;
}
.footer .user-info:after,.header .btn-group:after,.page-trade .drawer--content dl:after,.page-trade .trade-order--content dl:after,.page-trade .trade-order--title:after,.page-trade .trade-panel--content .handicap-buy dl:after,.page-trade .trade-panel--content .handicap-price:after,.page-trade .trade-panel--content .handicap-sell dl:after,.page-trade .trade-panel--content .handicap-title:after,.page-trade .trade-panel--content .trade-form .avaliable dl:after,.page-trade .trade-panel--content .trade-form .btn-group:after,.page-trade .trade-panel--content:after,.page-trade .trade-panel--title:after,.page-trade .trade-symbol .actions:after,.page-trade .trade-symbol p:after {
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    content: "."
}
#base-balance{
    color:#E0E0F9;
    font-size: 26px;
}
.order-table{
    padding: 20px 30px 20px 30px;
    background: #222240;
    position: relative;
    margin: 20px;
}
.order-header{
    height: 80px;
    line-height: 80px;
    border-bottom:1px solid #161736;
    color: #ADADD8
}
.order-header>div{
    align-items: center;
}
.order-content .all-amount:nth-child(1){
    width: 20%;
}
.order-content .all-amount:nth-child(2){
    width: 50%;
}
.order-content .flex-column{
    flex-direction: column;
        display: flex;
}
.order-content .all-amount:nth-child(3){
    width: 30%;
}
.flex-center{
    display: flex;
   align-self: center;
}
.trade-order .flex-center{
width: 100%;
}
.sell-submit{
    background: #d14b64 !important;
}
.order-table .flex-between{
      display: flex;
        justify-content: space-between;
    }
.order-content{
    padding-top: 20px;
    color: #ADADD8;
    font-size: 24px;
}
.order-select{
    margin-top: 20px;
    position: relative;
    bottom: 1px;
}
.input-box .input-title {
    height: 44px;
    font-size: 24px;
    line-height: 24px
}

.input-box .input-content {
    height: 124px;
    line-height: 72px;
    color: #1f3f59;
    font-size: 32px;
    font-weight: 700;
    position: relative
}


.bg-buy,.bg-up,.page-trade .trade-panel--content .trade-form.buy .submit {
    background: #03ad8f
}

.bg-down,.bg-sell,.page-trade .trade-panel--content .trade-form.sell .submit {
    background: #d14b64
}

.mini-toastr {
    position: fixed;
    z-index: 9;
    left: calc(50% - 250px);
    top: calc(50% - 44px)
}

.mini-toastr__notification {
    cursor: pointer;
    box-sizing: border-box;
    padding: 20px 28px;
    background-color: rgba(31,63,89,.9);
    color: #fff;
    min-width: 500px;
    max-width: 500px;
    text-align: center
}

.mini-toastr-notification__message {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    font-size: 32px;
    line-height: 48px
}

.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    line-height: 1;
    text-align: center;
    background: #fff;
    z-index: 99
}

.page-loading img {
    top: 50%;
    width: 64px
}

.page-loading img,.page-loading p {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%)
}

.page-loading p {
    top: 60%;
    line-height: 1.3;
    opacity: 0;
    transition: opacity .5s ease-in
}

.dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.dialog-box {
    width: 550px;
    min-height: 358px;
    background: hsla(0,0%,100%,.9);
    box-shadow: 0 2px 20px rgba(0,0,0,.1)
}

.dialog-title {
    height: 112px;
    line-height: 112px;
    font-size: 32px;
    font-weight: 700;
    text-align: center
}

.dialog-content {
    line-height: 38px;
    padding: 0 40px 40px
}

.dialog-action {
    height: 100px;
    line-height: 100px;
    color: #1882d4;
    text-align: center;
    border-top: 1px solid #e7ebee;
    box-sizing: border-box;
    font-weight: 700
}

.system-tips {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 650px;
    min-height: 636px;
    border-radius: 5px;
    box-shadow: 0 2px 20px rgba(0,0,0,.1);
    background: #f0f6ff url(/image/tips.b412e53.svg) no-repeat;
    background-position: center 50px
}

.system-tips .content {
    background-color: #fff;
    margin-top: 380px;
    padding: 40px;
    min-height: 256px;
    font-size: 32px;
    line-height: 48px;
    text-align: center
}

.system-tips .actions {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 650px
}

.system-tips .actions button {
    margin-left: 60px;
    font-weight: 700
}

.system-tips .actions button.primary {
    margin-left: 0;
    color: #1882d4;
    font-size: 32px;
    height: 48px
}

[m-mask] {
    color: transparent;
    overflow: hidden
}

[m-mask] * {
    color: transparent!important;
    background: transparent!important;
    border-color: transparent!important
}
.upper-display{
    color: #5298FE !important
}
.page-trade {
    width: 100%;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 98px;
    overflow: hidden
}

.page-trade.margin .margin-risk {
    padding-top: 20px;
    box-sizing: border-box;
    height: 176px;
    overflow: hidden;
    width: 750px
}

.page-trade.margin .margin-risk .info {
    margin: 0 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.page-trade.margin .margin-risk .info dl:last-of-type {
    text-align: right
}

.page-trade.margin .margin-risk .info dt {
    font-weight: 700
}

.page-trade.margin .margin-risk .info dd {
    font-size: 24px;
    margin-top: 10px;
    color: #c5cfd5
}

.page-trade.margin .margin-risk .risk {
    margin-top: 30px;
    width: 100%;
    color: #8c9fad
}

.page-trade.margin .margin-risk .risk.warn span {
    color: #d14b64
}

.page-trade.margin .margin-risk .risk.warn .progress {
    background-image: linear-gradient(90deg,rgba(209,75,100,.75),#d14b64)
}

.page-trade.margin .margin-risk .risk span {
    vertical-align: unset;
    margin-left: 30px
}

.page-trade.margin .margin-risk .risk .track {
    margin-top: 10px;
    height: 20px;
    width: 100%;
    background: #f7f7fb
}
.handicap-price #nowprice{
    color:  #f7f7fb;
}
.page-trade.margin .margin-risk .risk .progress {
    height: 100%;
    background-image: linear-gradient(-90deg,#dee2e6,#c7cfd5)
}

.page-trade.margin .avaliable {
    opacity: 0
}

.page-trade .trade-symbol {
    height: 110px;
    font-size: 32px;
    font-weight: 700;
    line-height: 110px;
    position: relative;
    display:flex;
    padding-left: 20px;
}

.page-trade .trade-symbol p {
    margin-right: 30px;
    
}
.page-trade .trade-symbol  .draw{
    margin-right: 10px;
    color: #E0E0F9;
    width:68%;
    margin-left: 20px;
    padding-top: 3px;
}
.page-trade .trade-symbol .actions {
    float: right
}

.page-trade .trade-symbol .actions i {
    margin-left: 30px
}

.page-trade .trade-symbol i {
    vertical-align: unset
}

.page-trade .trade-symbol i.mobile_icon_fav {
    color: #c5cfd5;
    float: left
}

.page-trade .trade-symbol i.mobile_icon_fav.marked {
    color: inherit
}

.page-trade .trade-symbol span {
    vertical-align: unset
}

.page-trade .trade-panel .select-box {
    position: relative;
    color: #fff;
    margin-right: 30px;
    white-space: nowrap;
    height: 70px;
}

.page-trade .trade-panel .select-box select {
    border: none;
    outline: none;
    background: transparent;
    -webkit-appearance: none;
    color: #ADADD8;
    font-size: 28px;
    line-height: 28px;
    padding-right: 30px;
    padding: 20px 30px 20px 0
}

.page-trade .trade-panel .select-box .arrow {
    left: -20px;
    top: -4px;
    position: relative
}

.page-trade .trade-panel .select-box .arrow:after,.page-trade .trade-panel .select-box .arrow:before {
    content: "";
    position: absolute
}
#d-price{
    border: 1px solid #ADADD8;
    font-size:28px;
    height:72px;
    line-height:72px;
    width:100%;
    color:#ADADD8;
    text-align: center;
    border-radius:8px;
}
.page-trade .trade-panel .select-box .arrow:before {
    top: 0;
    left: 0;
    border-top: 10px solid #c5cfd5;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.page-trade .trade-panel .select-box .arrow:after {
    border-top: 0 solid transparent;
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
    top: 0;
    left: 10px
}

.page-trade .trade-panel--title {
    height: 86px;
    padding-left: 30px;
    width: 412px
}

.page-trade .trade-panel--title button {
    font-size: 28px;
    height: 64px;
    margin-top: 24px;
    width: 180px;
    line-height: 64px;
    margin-right: 20px;
    padding-bottom: 10px;
    font-weight: 700;
    float: left;
}
.page-trade .trade-panel--title .sell{
 border:2px solid #d14b64;
 border-radius:0px 0px 20px 0px;
 color: #d14b64;
}
/* .buy-active{
 border:2px solid rgba(81,214,173,1) !important;
   color: #03ad8f !important;
} */
.page-trade .trade-panel--title .buy{
     color: #03ad8f;
border-radius:20px 0px 0px 0px;
border:2px solid #03ad8f;
}
.color-buy{
    border: 2px solid rgba(173,173,216,1);
    border-radius: 20px 0px 0px 0px;
    color: #ADADD8;
}
.color-up,.page-trade .trade-panel--content .handicap-buy {
    color: #03ad8f;
}
.color-down,.page-trade .trade-panel--content .handicap-sell {
    color: #d14b64;
}
.page-trade .trade-panel--title button:last-of-type {
    margin-right: 0
}

.page-trade .trade-panel--title .select-box {
    margin-top: 12px
}

.page-trade .trade-panel--content {
    padding-left: 30px;
}

.page-trade .trade-panel--content .trade-form {
    width: 382px;
    padding-top: 18px
}

.page-trade .trade-panel--content .trade-form .input-box {
    display:flex;
    position: relative;
       -ms-flex-align: center;
    align-items: center
}

.page-trade .trade-panel--content .trade-form .input-box input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 72px;
    border:1px solid rgba(173,173,216,1);
    font-size: 32px;
    font-weight: 400;
    padding-left: 20px;
    padding-right: 20px;
    border-radius:8px;
    background: #161736;
    color: #fff
}
.all-amount{
    text-align: center;
}
.trade-order--content{
    margin-bottom: 50px;
}
.all-amount span:nth-child(1){
    height: 60px;
    line-height: 60px;
}
  .start{
          background:#5298FE;
          border-radius:6px;
    }
     .submit {
    width: 120px;
    height: 48px;
    font-size: 28px;
    line-height: 48px;
    font-weight: 700;
    color: #fff;
    border-radius:5px;
}
.page-trade .trade-panel--content .trade-form .input-box.input-price .actions {
    position: absolute;
    display: none;
    visibility: hidden;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 0;
    border-left: 1px solid #e7ebee
}

.page-trade .trade-panel--content .trade-form .input-box.input-price .actions i {
    height: 30px;
    width: 80px;
    margin-top: 35px;
    display: inline-block
}

.page-trade .trade-panel--content .trade-form .input-box.input-price .actions i:last-of-type {
    border-left: 1px solid #e7ebee
}

.page-trade .trade-panel--content .trade-form .input-box.input-amount {
    position: relative
}

.page-trade .trade-panel--content .trade-form .input-box.input-amount span {
    height: 100%;
    line-height: 72px;
    position: absolute;
    right: 20px;
    top: 0;
    font-size: 28px;
    color: #8c9fad
}

.page-trade .trade-panel--content .trade-form .equivalent {
    color: #c5cfd5;
    font-size: 20px;
    padding-top: 10px;
    box-sizing: border-box;
    height: 80px;
    line-height: 60px;
}

.page-trade .trade-panel--content .trade-form .equivalent em,.page-trade .trade-panel--content .trade-form .equivalent span {
    vertical-align: unset
}

.page-trade .trade-panel--content .trade-form .avaliable {
    height: 74px;
    font-size: 24px;
    padding-top: 10px;
    box-sizing: border-box;
    color: #8c9fad
}

.page-trade .trade-panel--content .trade-form .avaliable dl {
    height: 80px;
    line-height: 70px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-trade .trade-panel--content .trade-form .avaliable dl dt {
    margin-right: 10px;
    float: left;
    height: 48px
}

.page-trade .trade-panel--content .trade-form .avaliable dl dd {
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center
}

.page-trade .trade-panel--content .trade-form .avaliable dl span {
    margin-right: 10px;
    color: #1f3f59
}

.page-trade .trade-panel--content .trade-form .btn-group {
    border: 1px solid #c8cfd5;
    height: 60px;
    box-sizing: border-box
}

.page-trade .trade-panel--content .trade-form .btn-group span {
    float: left;
    width: 1px;
    height: 24px;
    margin-top: 18px;
    background: #e7ebee
}

.page-trade .trade-panel--content .trade-form .btn-group button {
    color: #8c9fad;
    width: 126px;
    height: 58px;
    line-height: 60px;
    font-size: 24px;
    float: left
}

.page-trade .trade-panel--content .trade-form .btn-group button:active {
    background: #e7ebee
}

.page-trade .trade-panel--content .trade-form .total {
    white-space: nowrap;
    overflow: hidden;
    height:60px;
    padding-top: 62px;
    box-sizing: border-box;
    color: #8c9fad
}

.page-trade .trade-panel--content .trade-form .total.market,.page-trade .trade-panel--content .trade-form .total.market em {
    color: transparent
}

.page-trade .trade-panel--content .trade-form .total em {
    vertical-align: unset;
    font-weight: 700;
    color: #1f3f59
}

.page-trade .trade-panel--content .trade-form .submit {
    width: 382px;
    height: 88px;
    font-size: 28px;
    line-height: 88px;
    font-weight: 700;
    color: #fff
}

.page-trade .trade-panel--content .handicap {
    width: 298px;
    margin-top: -50px;
    height: 718px;
}

.page-trade .trade-panel--content .handicap-title {
    height: 50px;
    font-size: 24px;
    color: #8686C0;
    margin-right: 30px;
    white-space: nowrap
}
.order-buy{
    color: #51D6AD;
}
.order-sell{
    color: #F36D7D;
}
.page-trade .trade-panel--content .handicap-title .index {
    margin-right: 30px
}

.page-trade .trade-panel--content .handicap-title .amount {
    float: right
}

.page-trade .trade-panel--content .handicap-buy,.page-trade .trade-panel--content .handicap-sell {
    height: 220px;
}
.page-trade .trade-panel--content .handicap-sell {
     margin-bottom: 10px;
}
.page-trade .trade-panel--content .handicap-buy dl,.page-trade .trade-panel--content .handicap-sell dl {
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    overflow: hidden
}

.page-trade .trade-panel--content .handicap-buy dt,.page-trade .trade-panel--content .handicap-sell dt {
    width: 24px
}

.page-trade .trade-panel--content .handicap-buy dd,.page-trade .trade-panel--content .handicap-sell dd {
    letter-spacing: -1px
}

.page-trade .trade-panel--content .handicap-buy dd:last-of-type,.page-trade .trade-panel--content .handicap-sell dd:last-of-type {
    color: rgba(224, 224, 249, 1);
    margin-right: 30px
}

.page-trade .trade-panel--content .handicap-buy dl {
    background: linear-gradient(hsla(162, 62%, 58%, 0.2),hsla(162, 62%, 58%, 0.2)) no-repeat;
    background-position: 100%;
}

.page-trade .trade-panel--content .handicap-sell dl {
    background: linear-gradient(hsla(353, 85%, 69%, 0.2),hsla(353, 85%, 69%, 0.2)) no-repeat ;
    background-position: 100%;
}
.page-trade .trade-panel--content .handicap-price {
    height: 86px;
    box-sizing: border-box;
    padding-top: 12px;
    font-size: 0
}

.page-trade .trade-panel--content .handicap-price em {
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    font-weight: 700;
    float: left;
    white-space: nowrap
}

.page-trade .trade-panel--content .handicap-price em+b {
    line-height: 30px;
    vertical-align: baseline;
    float: left
}

.page-trade .trade-panel--content .handicap-price b {
    font-size: 20px;
    margin-left: 10px;
    vertical-align: unset
}

.page-trade .trade-panel--content .handicap-price span {
    color: #c5cfd5;
    font-size: 20px;
    line-height: 20px;
    display: block;
    margin-top: 30px
}

.page-trade .trade-panel--content .handicap-depth {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    white-space: nowrap;
    height: 84px
}

.page-trade .trade-panel--content .handicap-depth a {
    font-size: 24px;
    line-height: 64px;
    color: #8c9fad
}
.color-sell{
    border: 2px solid rgba(173,173,216,1);
    border-radius: 0px 0px 20px 0px;
    color: #ADADD8;
}
.page-trade .trade-panel--content .handicap-depth select {
    font-size: 24px;
    line-height: 24px
}

.page-trade .trade-panel--content .handicap-depth .arrow {
    top: -2px
}

.page-trade .trade-order {
    padding-left: 0
}

.page-trade .trade-order--title {
    height: 80px;
    line-height: 80px;
    font-size: 40px;
    color: rgba(82, 152, 254, 1);
    border:2px solid rgba(34, 34, 64, 1)
}

.page-trade .trade-order--title span {
    opacity: .5;
    margin-right: 32px;
    font-size: 28px;
}
.page-trade .trade-order--title .align {
    width: 176px;
    border-bottom: 4px solid rgba(82, 152, 254, 1);
    text-align: center;
}
.page-trade .trade-order--title span i {
    margin-right: 8px;
    vertical-align: unset
}
.load .page-trade .trade-panel{
    border-bottom: 20px solid rgba(34,34,64,1);
}
.page-trade .trade-order--content .loading {
    height: 480px;
    line-height: 480px;
    text-align: center
}

.page-trade .trade-order--content .loading img {
    height: 64px
}

.page-trade .trade-order--content .no-info {
    height: 480px;
    text-align: center;
    color: #c5cfd5;
    font-size: 24px;
    box-sizing: border-box;
    padding-top: 110px
}

.page-trade .trade-order--content .no-info img {
    display: block;
    margin: 0 auto 20px
}

.page-trade .trade-order--content dl {
    height: 214px;
    padding: 40px 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #e7ebee
}

.page-trade .trade-order--content dl:last-of-type {
    border-bottom: none
}

.page-trade .trade-order--content dt {
    height: 62px
}

.page-trade .trade-order--content dt span {
    font-size: 24px;
    color: #8c9fad
}

.page-trade .trade-order--content dt em {
    vertical-align: unset;
    font-size: 32px;
    padding-right: 10px
}

.page-trade .trade-order--content dt button {
    font-size: 24px;
    color: #1882d4;
    float: right
}

.page-trade .trade-order--content dt button:disabled {
    color: #8c9fad
}

.page-trade .trade-order--content dd {
    float: left;
    width: 210px;
    overflow: hidden
}

.page-trade .trade-order--content dd em {
    display: block;
    height: 44px;
    color: #8c9fad;
    font-size: 24px;
    white-space: nowrap
}

.page-trade .trade-order--content dd:first-of-type {
    width: 270px
}

.page-trade .trade-order--content dd:last-of-type {
    text-align: right
}

.page-trade .drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 10;
    background: rgba(0,0,0,0.65);
    transition: all .3s;
    height: 100%;
}

.page-trade .drawer-box {
      opacity:1;
    width: 600px;
    height: 100%;
     z-index: 11;
    background: #222240;
    overflow: auto;
    position: relative;
    transition: all .3s;
    left: -630px;
    color: #E0E0F9
}
.page-trade .leftBg, .page-trade .rightBg {
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
}
.page-trade .rightBg span{
    min-width: 1%;
    max-width: 100%;
    float: right;
    height: 100%;
    background: rgba(243, 109, 125, 0.2)
}
.page-trade  .rightBg {
    right: 100px;
    height: 100%;
}


.page-trade .drawer--title {
    height: 120px;
    line-height: 120px;
    font-size: 40px;
    padding-left: 30px;
    position: absolute;
    top: 10px;
    left: 0;
    width: 600px;
    font-weight: 700;
    color: #E0E0F9
}

.page-trade .drawer--title i {
    font-size: 30px;
    margin-right: 32px
}

.page-trade .drawer--tabs {
    height: 68px;
    line-height: 68px;
    border-bottom: 1px solid #222240;
    padding-left: 30px;
    position: absolute;
    top: 120px;
    left: 0;
    width: 600px;
    overflow-x: auto;
    white-space: nowrap;
    word-wrap: break-word;
    font-size: 0;
    background: #161736;
}
.list >dl{
    display: flex;
}
.page-trade .drawer--tabs span {
    font-size: 28px;
    font-weight: 500;
    margin-right: 60px;
    min-width: 50px;
    color: #E0E0F9
}

.page-trade .drawer--tabs span i {
    vertical-align: unset
}

.page-trade .drawer--tabs span.cur {
    color: inherit
}

.page-trade .drawer--content {
    padding: 188px 40px 0 30px
}

.page-trade .drawer--content .partition {
    height: 64px;
    padding-top: 30px;
    box-sizing: border-box;
    font-size: 28px;
    color: #1882d4;
    font-weight: 700
}

.page-trade .drawer--content .lists .no-info {
    height: 480px;
    text-align: center;
    color: #c5cfd5;
    font-size: 24px;
    box-sizing: border-box;
    padding-top: 110px
}

.page-trade .drawer--content .lists .no-info img {
    display: block;
    margin: 0 auto 20px
}

.page-trade .drawer--content .list:last-of-type dl:nth-last-of-type(1) {
    border-bottom: none
}

.page-trade .drawer--content dl {
    height: 100px;
    line-height: 100px;
    box-sizing: border-box;
    border-bottom: 1px solid #000000
}

.page-trade .drawer--content dt {
    width: 300px;
    font-weight: 500
}

.page-trade .drawer--content dt.cur {
    color: #E0E0F9
}

.page-trade .drawer--content dd {
    width: 200px;
    text-align: right;
    color: #51D6AD
}
.trade-order .data-img{
    min-height: 300px;
      height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}
.data-img p{
    color: #8686C0;
}
::-webkit-input-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

:-moz-placeholder,::-moz-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

:-ms-input-placeholder {
    color: #E0E0F9;
    font-size: 28px
}
</style>